<template>
  <div class="question-edit-container m-t-8">
    <el-input size="small" v-model="question.title" placeholder="请输入标题"/>
    <el-radio-group v-model="question.type" class="m-t-10 m-b-10">
      <el-radio :label="1">单选题</el-radio>
      <el-radio :label="2">多选题</el-radio>
      <el-radio :label="3">问答题</el-radio>
    </el-radio-group>
    <template v-if="question.type !== 3">
      <div v-for="(option, index) in question.options" :key="option.index" class="option-item flex">
        <el-input size="mini" v-model="option.title" :placeholder="`选项${index + 1}`"/>
        <el-button size="mini" class="option-btn primary" title="在当前选项后插入一个新的选项"
                   @click="operateOption({ action: 'add', index })">添加</el-button>
        <el-popconfirm title="确定删除这个选项吗？" class="flex"
                       @onConfirm="operateOption({ action: 'delete', index })">
          <el-button slot="reference" size="mini" class="option-btn danger" title="删除当前选项（至少保留两个选项）"
                     :disabled="question.options.length < 3">删除</el-button>
        </el-popconfirm>
        <el-checkbox size="mini" border title="允许填空" v-model="option.fill">填空</el-checkbox>
        <el-button size="mini" class="option-btn success" title="将当前选项上移一个位置"
                   :disabled="index === 0"
                   @click="operateOption({ action: 'up', index })">上移</el-button>
        <el-button size="mini" class="option-btn success" title="将当前选项下移一个位置"
                   :disabled="index === question.options.length - 1"
                   @click="operateOption({ action: 'down', index })">下移</el-button>
      </div>
    </template>
    <el-button size="small" type="primary" class="full m-t-8" @click="save">完成编辑</el-button>
  </div>
</template>

<script>
import * as format from './format';

export default {
  name: 'QuestionEdit', // 编辑题目
  props: {
    question: { // 题目
      type: Object,
      required: true,
    },
  },
  computed: {
    // 问题类型，用于监听
    questionType() { return this.question.type; },
  },
  methods: {
    // 对选项的操作
    operateOption({ action, index }) {
      if (action === 'add') this.question.options.splice(index + 1, 0, this.initNewOption());
      if (action === 'delete' && this.question.options.length > 1) { // 删除
        this.question.options.splice(index, 1);
      } else if (action === 'up' && index !== 0) { // 上移
        this.question.options[index]
          = this.question.options.splice(index - 1, 1, this.question.options[index])[0];
      } else if (action === 'down' && index !== this.question.options.length - 1) { // 下移
        this.question.options[index]
          = this.question.options.splice(index + 1, 1, this.question.options[index])[0];
      }
    },
    // 生成一个新选项
    initNewOption() {
      return {
        index: new Date().getTime(),
        title: '',
        fill: false,
      };
    },
    // 保存编辑
    save() {
      if (this.question.type !== 3) { // 格式化index
        this.question.options = this.question.options.map((option, index) => ({
          index: index + 1,
          title: option.title.trim(),
          fill: option.fill,
        }));
      }
      this.$emit('saveQuestion');
    },
  },
  watch: {
    questionType() {
      const noOptions = this.question.options ? this.question.options.length < 2 : true;
      if (this.questionType !== 3 && noOptions) this.question.options = format.defaultOptions;
    },
  },
};
</script>

<style></style>
